<template>
  <div class= "my-editView">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="作者" prop="author" >
        <el-input v-bind:disabled="isDisabled" v-model="form.author"  maxlength="30" />
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-bind:disabled="isDisabled" v-model="form.description"  />
      </el-form-item>
      <el-form-item label="浏览量" prop="views">
        <el-input v-bind:disabled="isDisabled" v-model="form.views"  />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input   v-model="form.orderNum" v-bind:disabled="isDisabled" />
      </el-form-item>
      <el-form-item label="文章类型" prop="type">
        <el-input v-bind:disabled="isDisabled"  v-model="form.type"  />
      </el-form-item>
      <el-form-item label="文章题目" prop="name">
        <el-input v-bind:disabled="isDisabled"  v-model="form.name"  />
      </el-form-item>
      <el-form-item label="内容">
        <editor  v-model="form.content" :min-height="192"/>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { getArticle } from "@/api/article/article";

export default {
  data() {
    return {
      isDisabled: true,
      isReadOnly: true,
      form: {},
      articleId: null,
    };
  },
  created() {
    this.articleId = this.$route.query.articleId;
    this.handleGetInfo();
  },
  methods: {
    /**
     *   依据ID 查询信息
     */
    handleGetInfo() {
      if (this.articleId) {
        getArticle(this.articleId).then((response) => {
          this.form = response.data;
        });
      }
    },
  },
};
</script>

<style  rel="stylesheet/scss" lang="scss">
.my-editView {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../../../assets/images/edit3.jpg");
  background-size: cover;
}

</style>
















<!--<template>-->
<!--  <div>-->

<!--    <quill-editor v-model="content" ref="myQuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"-->
<!--                  @change="onEditorChange($event)" @fullscreen="toggleFullScreen">-->

<!--    </quill-editor>-->
<!--    &lt;!&ndash;    <div>&ndash;&gt;-->
<!--    &lt;!&ndash;      {{content}}&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--// require styles 引入样式-->
<!--import 'quill/dist/quill.core.css'-->
<!--import 'quill/dist/quill.snow.css'-->
<!--import 'quill/dist/quill.bubble.css'-->
<!--import { quillEditor } from 'vue-quill-editor'-->
<!--// 工具栏配置-->
<!--const toolbarOptions = [-->
<!--  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -&#45;&#45;&#45;&#45;['bold', 'italic', 'underline', 'strike']-->
<!--  ['blockquote', 'code-block'], // 引用  代码块-&#45;&#45;&#45;&#45;['blockquote', 'code-block']-->
<!--  [{ header: 1 }, { header: 2 }], // 1、2 级标题-&#45;&#45;&#45;&#45;[{ header: 1 }, { header: 2 }]-->
<!--  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-&#45;&#45;&#45;&#45;[{ list: 'ordered' }, { list: 'bullet' }]-->
<!--  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-&#45;&#45;&#45;&#45;[{ script: 'sub' }, { script: 'super' }]-->
<!--  [{ indent: '-1' }, { indent: '+1' }], // 缩进-&#45;&#45;&#45;&#45;[{ indent: '-1' }, { indent: '+1' }]-->
<!--  [{'direction': 'rtl'}], // 文本方向-&#45;&#45;&#45;&#45;[{'direction': 'rtl'}]-->
<!--  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-&#45;&#45;&#45;&#45;[{ size: ['small', false, 'large', 'huge'] }]-->
<!--  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-&#45;&#45;&#45;&#45;[{ header: [1, 2, 3, 4, 5, 6, false] }]-->
<!--  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-&#45;&#45;&#45;&#45;[{ color: [] }, { background: [] }]-->
<!--  [{ font: [] }], // 字体种类-&#45;&#45;&#45;&#45;[{ font: [] }]-->
<!--  [{ align: [] }], // 对齐方式-&#45;&#45;&#45;&#45;[{ align: [] }]-->
<!--  ['clean'], // 清除文本格式-&#45;&#45;&#45;&#45;['clean']-->
<!--  ['image'], // 链接、图片、视频-&#45;&#45;&#45;&#45;['link', 'image', 'video']-->
<!--  ['fullscreen']-->
<!--]-->
<!--export default {-->
<!--  components: { quillEditor },-->
<!--  data () {-->
<!--    return {-->
<!--      isFullScreen: false,-->
<!--      content: null,-->
<!--      editorOption: {-->
<!--        placeholder: '请输入文本...',-->
<!--        theme: 'snow',-->
<!--        modules: {-->
<!--          toolbar: {-->
<!--            container: toolbarOptions-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    toggleFullScreen() {-->
<!--      this.isFullScreen = !this.isFullScreen;-->
<!--      const editorElement = document.querySelector('.ql-editor');-->
<!--      if (this.isFullScreen) {-->
<!--        // 进入全屏-->
<!--        editorElement.classList.add('fullscreen');-->
<!--      } else {-->
<!--        // 退出全屏-->
<!--        editorElement.classList.remove('fullscreen');-->
<!--      }-->
<!--    },-->
<!--    // onEditorFocus() {-->
<!--    //   const editorElement = this.$refs.myQuillEditor.quill.root;-->
<!--    //   editorElement.classList.add('fullscreen');-->
<!--    // },-->
<!--    onEditorBlur () {-->
<!--      // 失去焦点事件-->
<!--    },-->
<!--    onEditorFocus () {-->
<!--      // 获得焦点事件-->
<!--    },-->
<!--    onEditorChange () {-->
<!--      // 内容改变事件-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--.fullscreen {-->
<!--  position: fixed;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  height: 100vh;-->
<!--  z-index: 9999;-->
<!--  /* 其他样式，如背景色等 */-->
<!--}-->
<!--.editor {-->
<!--  line-height: normal !important;-->
<!--  height: 500px;-->
<!--}-->
<!--.ql-snow .ql-tooltip[data-mode=link]::before {-->
<!--  content: "请输入链接地址:";-->
<!--}-->
<!--.ql-snow .ql-tooltip.ql-editing a.ql-action::after {-->
<!--  border-right: 0px;-->
<!--  content: '保存';-->
<!--  padding-right: 0px;-->
<!--}-->

<!--.ql-snow .ql-tooltip[data-mode=video]::before {-->
<!--  content: "请输入视频地址:";-->
<!--}-->

<!--.ql-snow .ql-picker.ql-size .ql-picker-label::before,-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-item::before {-->
<!--  content: '14px';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {-->
<!--  content: '10px';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {-->
<!--  content: '18px';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,-->
<!--.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {-->
<!--  content: '32px';-->
<!--}-->

<!--.ql-snow .ql-picker.ql-header .ql-picker-label::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item::before {-->
<!--  content: '文本';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {-->
<!--  content: '标题1';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {-->
<!--  content: '标题2';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {-->
<!--  content: '标题3';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {-->
<!--  content: '标题4';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {-->
<!--  content: '标题5';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,-->
<!--.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {-->
<!--  content: '标题6';-->
<!--}-->

<!--.ql-snow .ql-picker.ql-font .ql-picker-label::before,-->
<!--.ql-snow .ql-picker.ql-font .ql-picker-item::before {-->
<!--  content: '标准字体';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,-->
<!--.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {-->
<!--  content: '衬线字体';-->
<!--}-->
<!--.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,-->
<!--.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {-->
<!--  content: '等宽字体';-->
<!--}-->
<!--</style>-->

